<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>自定义简单动画</title>
    <style type="text/css">
         *
         {  margin:0;padding:0;
          }
          body
          { padding:60px;}
 #panel
 {
     position:relative;
     width:100px;
     height:100px;
     border:1px solid blue;
     background-color:green;
     cursor:pointer;
     
 }           
    </style>
    <script src="jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">

            $(function(){

					$("#panel").css("opacity","0.5");//设置透明度
					$("#panel").click(function(){
						$(this).animate({left:"500px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px"},3000,                        function(){//回调函数，用来设置样式的
							$(this).css("border","5px solid blue");
							})
						})

				});
    </script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

